<template>
  <div class="app-container">
    <div class="search-container"> 
      <el-row  type="flex" :gutter="10" justify="space-between">
        <el-col :span="12">
          <label class="search-option-label">内容</label>
          <el-input v-model="listQuery.content" class="select-item" placeholder="请输入" style="width: 180px;" ></el-input>
        </el-col>
        <el-col :span="12">
          <label class="search-option-label">日期</label>
          <el-date-picker
            value-format="timestamp"
            v-model="date_group"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
      </el-row>  
      <el-row  type="flex" :gutter="10" justify="space-between">  
        <el-col :span="12">
          <label class="search-option-label">待办类型</label>
          <el-select v-model="listQuery.target_type" placeholder="请选择" clearable >
            <el-option
              v-for="item in target_type_options"
              :key="item.key"
              :label="item.display_name"
              :value="item.key">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="12">
          <label class="search-option-label">是否处理</label>
          <el-select v-model="listQuery.is_handle" placeholder="请选择" clearable >
            <el-option
              v-for="item in is_handel_options"
              :key="item.key"
              :label="item.display_name"
              :value="item.key">
            </el-option>
          </el-select>

        </el-col>
      </el-row>
      <el-row type="flex" :gutter="10" justify="end" >
        <el-col :span="2">
          <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter" round>搜索</el-button>
        </el-col>  
        <el-col :span="2">
          <el-button size="mini" type="primary" icon="el-icon-refresh" @click="clearOptions" round>清空</el-button>
        </el-col>
      </el-row>  
    </div>
    <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">

      <el-table-column min-width="300px" label="内容">
        <template slot-scope="scope">
          <div v-if="scope.row.is_handle && '0' === scope.row.is_handle" >
            <a class="link-type" @click="handleViewTodo(scope.row)">
              <span>{{ scope.row.content }}</span>
            </a>
          </div>
          <div v-else>
              <span>{{ scope.row.content }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column width="180px" align="center" label="日期">
        <template slot-scope="scope">
          <span>{{scope.row.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="待办类型" width="110">
        <template slot-scope="scope">
          <el-tag >{{ scope.row.target_type  | targetTypeFilter}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="处理情况" width="110">
        <template slot-scope="scope">
          <el-tag >{{ scope.row.is_handle  | ishandleFilter}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column class-name="status-col" label="业务状态" width="110">
        <template slot-scope="scope">
          <el-tag>
            <span v-if="'cv' === scope.row.target_type">{{ scope.row.target_status | cvStatusValFilter }} </span>
            <span v-if="'project' === scope.row.target_type">{{ scope.row.target_status | projectStatusFilter }} </span>
            <span v-if="'invoice' === scope.row.target_type">{{ scope.row.target_status | invoiceStatusFilter }} </span>
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current_page"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>
<script>
import API from '@/utils/backend_api'
import Static_Data from '@/data/index'

export default {
  name: 'todo',
  components: {},
  data() {
    return {
      target_type_options: Static_Data.target_type,
      is_handel_options: Static_Data.is_handel_options,
      list: null,
      total: 0,
      listLoading: true,
      current_page: 1,
      date_group: '',
      listQuery: {
        page: 1,
        limit: 10,
        offset: 0,
        content: '',
        start_date: '',
        target_type: '',
        end_date: '',
        is_handle: 'all',
        sort: '-create_date'
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleViewTodo(data) {
      API.todo.is_handle(data.id).then(response => {
        console.log()
        if (response.data && response.data.is_handle && response.data.is_handle === '1') {
          this.$message('该待办已被处理')
          this.refreshTodo()
        } else {
          if (data.url) {
            this.$router.push({ path: data.url })
          }
        }
      })
    },
    getList() {
      this.listLoading = true
      API.todo.all(this.listQuery).then(response => {
        this.list = response.data
        if (response.headers && response.headers['x-total-count']) {
          this.total = Number(response.headers['x-total-count'])
        }
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleFilter() {
      if (this.date_group && this.date_group !== '' && this.date_group.length === 2) {
        this.listQuery.start_date = this.date_group[0]
        this.listQuery.end_date = this.date_group[0]
      } else {
        this.listQuery.start_date = ''
        this.listQuery.end_date = ''
      }

      this.getList()
    },
    clearOptions() {
      this.date_group = ''
      this.listQuery = {
        page: 1,
        limit: 10,
        offset: 0,
        content: '',
        start_date: '',
        target_type: '',
        end_date: '',
        is_handle: 'all',
        sort: '-create_date'
      }
    },
    handleCurrentChange(val) {
      if (val >= 1) {
        this.current_page = val
        this.listQuery.offset = (val - 1) * this.listQuery.limit
        this.getList()
      }
    }
  }
}
</script>
<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.search-container{
  display: block;
  /* border: 1px solid #ebebeb; */
  margin: 2px 2px 2px 2px;
}
.search-option-label {
  margin-left: 20px;
}

</style>

